<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 15px">
      <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false">
      </el-alert>
      <el-row :gutter="20">
        <el-col :span="8"></el-col>
        <div class="block">
          <span class="demonstration">选择商品分类：</span>
          <el-cascader style="margin-top: 15px" v-model="chackAll" :options="options" :props="cateProps"
            @change="handleChange"></el-cascader>
        </div>
      </el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button type="primary" :disabled="isdisabled" @click="dialogFormVisible = true">添加参数</el-button>
          <el-table :data="manyParamsData" border style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item>
                    <el-tag :key="index" v-for="(tag,index) in scope.row.attr_vals" closable
                      :disable-transitions="false" @close="handleClose(index,scope.row)">
                      {{tag}}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
                      ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)"
                      @blur="handleInputConfirm(scope.row)">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+
                      New Tag</el-button>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="#" type="index"> </el-table-column>
            <el-table-column label="参数名称" prop="attr_name"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" size="mini" type="primary" @click="EditMany(scope.row)">编辑</el-button>
                <el-button icon="el-icon-delete" size="mini" type="danger" @click='deletemany(scope.row)'>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="静态参数" name="only">
          <el-button type="primary" :disabled="isdisabled" @click="dialogFormVisible = true">添加属性</el-button>
          <el-table :data="onlyParamsData" border style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item>
                    <el-tag :key="index" v-for="(tag,index) in scope.row.attr_vals" closable
                      :disable-transitions="false" @close="handleClose(index,scope.row)">
                      {{tag}}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue"
                      ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)"
                      @blur="handleInputConfirm(scope.row)">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+
                      New Tag</el-button>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="#" type="index"> </el-table-column>
            <el-table-column label="参数名称" prop="attr_name"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" size="mini" type="primary" @click="EditMany(scope.row)">编辑</el-button>
                <el-button icon="el-icon-delete" size="mini" type="danger" @click='deletemany(scope.row)'>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 编辑 -->
    <el-dialog @close="resetForm" width="40%" title="编辑动态参数" :visible.sync="dialogVisible">
      <el-form :model="AddManyParamsData" ref="AddManyParamsRef" :rules="AddManyParamsRules">
        <el-form-item prop="attr_name" label="动态参数" label-width="80px">
          <el-input v-model="AddManyParamsData.attr_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditManyParamsOk">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加 -->
    <el-dialog title="添加参数" :visible.sync="dialogFormVisible" @close="resetForm">
      <el-form :model="AddManyParamsData" ref="AddManyParamsRef" :rules="AddManyParamsRules">
        <el-form-item label="动态参数" prop="attr_name">
          <el-input v-model="AddManyParamsData.attr_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    getcategoriesApi,
    getgoodscategoriesApi,
    getaddcategoriesApi,
    getdelcategoriesApi,
    getadd1categoriesApi
  } from "@/http/api";
  export default {
    data() {
      return {

        dialogFormVisible: false,
        AddManyParamsRules: {
          attr_name: [{
            required: true,
            message: "请输入动态参数，不能为空",
            trigger: "blur",
          }, ],
        },
        AddManyParamsData: {
          attr_name: ""
        },
        dialogVisible: false,
        inputVisible: false,
        inputValue: "",
        tableData: [],
        chackAll: [],
        cateProps: {
          expandTrigger: "hover",
          label: "cat_name",
          children: "children",
          value: "cat_id",
        },
        activeName: "many",
        value: "",
        options: [],
        // 动态数据
        manyParamsData: [],
        // 静态数据
        onlyParamsData: []
      };
    },
    created() {
      this.getcategories();
    },
    components: {},
    mounted() {},
    methods: {
      add() {
        this.$refs.AddManyParamsRef.validate(async (valid) => {
          console.log(valid);
          if (!valid) return;
          const res = await getadd1categoriesApi(this.params_id, {
            attr_name: this.AddManyParamsData.attr_name,
            attr_sel: this.activeName,
          });
          this.getparamslist()
          this.dialogFormVisible = false
        });
      },
      async handleClose(index, row) {
        console.log("删除", index, row);
        row.attr_vals.splice(index, 1);
        const res = await getaddcategoriesApi(this.params_id, row.attr_id, {
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals: row.attr_vals.join(","),
        })

      },
      showInput(row) {
        row.inputVisible = true;
        console.log("点击按钮时触发", row);
        this.$nextTick(_ => {
          console.log('数据未', this.$refs.saveTagInput);
          this.$refs.saveTagInput.focus()
        });
      },
      async handleInputConfirm(row) {
        console.log("失焦", row);
        if (row.inputValue.trim().length === 0) return   row.inputVisible = false;
        row.attr_vals.push(row.inputValue)
        const res = await getaddcategoriesApi(this.params_id, row.attr_id, {
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals: row.attr_vals.join(","),
        })
        console.log(res, 5677567)
        row.inputVisible = false
        row.inputValue = ""
        this.getcategories()

      },
      async deleteOnly(row) {

      },
      EditOnly() {},
      async deletemany(row) {
        const res = await getdelcategoriesApi(this.params_id, row.attr_id)
        this.getparamslist()
      },
      EditManyParamsOk() {
        this.$refs.AddManyParamsRef.validate(async (valid) => {
          console.log(valid);
          if (!valid) return;
          const res = await getaddcategoriesApi(
            this.params_id,
            this.AddManyParamsData.attr_id, {
              attr_name: this.AddManyParamsData.attr_name,
              attr_sel: this.activeName,
            }
          );
          this.getparamslist()
          this.dialogVisible = false
        });
      },
      resetForm() {
        console.log("resetForm");
        this.AddManyParamsData.attr_name = "";
      },

      EditMany(row) {
        this.AddManyParamsData.attr_name = row.attr_name;
        this.AddManyParamsData.attr_id = row.attr_id;
        this.dialogVisible = true
      },
      async getparamslist() {
        const res = await getcategoriesApi(this.params_id, this.activeName)

        res.forEach(item => {
          item.inputValue = "";
          item.inputVisible = false;
        })
        if (this.activeName === "many") {
          res.forEach(item => {
            item.attr_vals =
              item.attr_vals.length > 0 ? item.attr_vals.split(",") : []
          })
          console.log("动态", res);
          this.manyParamsData = res
        } else if (this.activeName === "only") {
          res.forEach(item => {
            item.attr_vals =
              item.attr_vals.length > 0 ? item.attr_vals.split(",") : []
          })
          console.log("静态", res);
          this.onlyParamsData = res
        }

      },
      async handleChange(value) {
        console.log(this.chackAll, 11111);
        console.log(this.activeName);
        this.getparamslist()
      },
      handleClick(tab, event) {
        console.log(tab, event, 123212);
        console.log(this.activeName);
        this.getparamslist()
      },
      async getcategories() {
        var res = await getgoodscategoriesApi();
        this.options = res;
        // console.log(res);
      },
    },
    computed: {
      params_id() {
        return this.chackAll[this.chackAll.length - 1];
      },
      isdisabled() {
        if (this.chackAll.length != 3) {
          return true
        }
        return false
      }
    },
    watch: {},
  };

</script>

<style scoped lang='scss'>
  .el-tag+.el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

</style>
